<template>
<div class='label-management'>
  <div class="serch">
    <el-form :inline='true'>
      <el-form-item label="标题搜索：">
        <el-input class="input" v-model="name" size="small" placeholder="输入标签名称搜索"
                  @keyup.enter.native='getLabelList(pageSize, 1)' style='width: 257px' maxlength = '16' clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getLabelList(pageSize, 1)">查询</el-button>
        <el-button type="primary" size="small" @click="addLabel(null)" v-if='setRole("新增")'>新增商品标签</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
    <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
    <el-table-column prop="name" label="标签名称" width="260" align="center"></el-table-column>
    <el-table-column prop="labelValue" label="标签值" align="center" :formatter='format'></el-table-column>
    <el-table-column prop="remark" label="备注" align="center"></el-table-column>
    <el-table-column align="center" label='操作' width="260" >
      <template slot-scope='scope'>
        <el-button type='text' @click='addLabel(scope.row)' v-if='setRole("修改")'>修改</el-button>
        <el-button type='text' @click='deleLabel(scope.row.glId, scope.row.glvId)' v-if='setRole("删除")'>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pageblock pageinput">
    <el-button class='topage' type='primary' @click='getLabelList(pageSize, pageNum)' size='small'>跳转</el-button>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :current-page="pageNum"
                   :page-sizes="[5,10]" :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
  <!-----------------新增商品标签---------------------->
  <el-dialog width="40%" :title="isAdd ? '新增商品标签' : '修改商品标签'" :visible.sync="addLabelVisible" :show-close='false'
  :close-on-click-modal='false' :close-on-press-escape='false'>
    <new-label @cancelAddLabel='cancelAddLabel' :datas.sync='datas' @getLabelList='getLabelList(pageSize, 1)'
    :isAdd.sync='isAdd'></new-label>
  </el-dialog>
</div>
</template>

<script>
  import newLabel from './goods-goodslist/components/newLabel'
  import {mapState} from 'vuex'
  import util from '@/util'
  import {
    findGoodsLabelsListPage,
    deleteGoodsLabels
  } from '@/api'
  export default {
    name: 'goods-labelManagement',
    data () {
      return {
        datas: {},
        tableData: [],
        addLabelVisible: false,
        total: 0,
        pageSize: 10,
        pageNum: 1,
        name: '',
        isAdd: null, //是否新增
      }
    },
    computed: mapState(["merchantId", "power"]),
    components: {
      newLabel
    },
    mounted () {
     this.getLabelList(this.pageSize, this.pageNum)
    },
    methods: {
      //删除标签
      deleLabel(labelId, id) {
        this.$confirm('删除后不可恢复，确定删除该条标签吗？', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          center: true,
          showClose: false
        }).then(() => {
          let data = {
            labelId: labelId, //glId
            shopId: this.merchantId,
            id: id, //glvId
          }
          deleteGoodsLabels(data).then((res)=> {
            if (res.code == 200) {
             this.$message.success('已删除')
             this.getLabelList(this.pageSize, this.pageNum)
            }
          })
        }).catch(() => {
        })
      },
      //增加商品标签
      addLabel(obj) {
        if (obj == null) {
          if (this.tableData.length > 9) {
            this.$message.error('最多只能新增10条')
            return
          }
          this.isAdd = 1
        } else {
          this.isAdd = 0
        }
        this.datas = JSON.parse(JSON.stringify(obj))
       this.addLabelVisible = true
      },
     //获取标签类型
      getLabelList (pageSize, pageNum) {
        let data = {
          shopId: this.merchantId,
          name: this.name,
          pageNum: pageNum,
          pageSize: pageSize
        }
        findGoodsLabelsListPage(data).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.total = res.data.pageTotal
          }
        })
      },
      cancelAddLabel() {
        this.addLabelVisible = false
        this.datas = {}
        this.isAdd = null
      },
      handleSizeChange (val) {
        this.pageSize = val
        this.getLabelList(val, this.pageNum)
      },
      handleCurrentChange (val) {
        this.pageNum = val
        this.getLabelList(this.pageSize, val)
      },
      //配置权限
      setRole(key) {
        return util.selectTitle(this.power, key);
      },
      format (row, column, cellValue) {
        return cellValue.map((v)=> {
          return v.labelValue
        }).join('、')
      }
    }
  }
</script>

<style scoped lang='less'>
.label-management {
  .serch {
    padding: 30px 20px 20px;
  }
}
</style>
